import React, { memo } from "react";
import { Row, Col, Icon, Tooltip } from "antd";
import "./DataStatistics.less";
import { MiniArea, MiniBar, MiniProgress } from "@/components/Charts";
import numeral from "numeral";

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 }
};

const IntroduceRow = memo(({ loading, visitData, statisticalData }) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <div className="min-chart">
        <div>
          <div className="min-chart-title">
            <span>阅读数</span>
            <Tooltip title="阅读数">
              <Icon type="info-circle-o" />
            </Tooltip>
          </div>
          <div className="min-chart-number">{numeral((statisticalData[0] && statisticalData[0]["y"]) || 0).format("0,0")}</div>
        </div>
        <MiniArea color="#975FE4" data={visitData} />
      </div>
    </Col>
    <Col {...topColResponsiveProps}>
      <div className="min-chart">
        <div>
          <div className="min-chart-title">
            <span>点赞数</span>
            <Tooltip title="点赞数">
              <Icon type="info-circle-o" />
            </Tooltip>
          </div>
          <div className="min-chart-number">{numeral((statisticalData[2] && statisticalData[2]["y"]) || 0).format("0,0")}</div>
        </div>
        <MiniBar data={visitData} />
      </div>
    </Col>
    <Col {...topColResponsiveProps}>
      <div className="min-chart">
        <div>
          <div className="min-chart-title">
            <span>评论数</span>
            <Tooltip title="评论数">
              <Icon type="info-circle-o" />
            </Tooltip>
          </div>
          <div className="min-chart-number">{numeral((statisticalData[1] && statisticalData[1]["y"]) || 0).format("0,0")}</div>
        </div>
        <MiniProgress percent={78} strokeWidth={8} target={80} targetLabel={"80%"} color="#13C2C2" />
      </div>
    </Col>
    <Col {...topColResponsiveProps}>
      <div className="min-chart">
        <div>
          <div className="min-chart-title">
            <span>分享数</span>
            <Tooltip title="分享数">
              <Icon type="info-circle-o" />
            </Tooltip>
          </div>
          <div className="min-chart-number">{numeral((statisticalData[3] && statisticalData[3]["y"]) || 0).format("0,0")}</div>
        </div>
        <MiniArea color="#fa5555" data={visitData} />
      </div>
    </Col>
  </Row>
));

export default IntroduceRow;
